import React, { Component } from 'react';
import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';
import Test from './pages/Test';

import MyLink from './components/MyLink';
/* NavLink 可以做导航的路径，相比较Link组件来说，多了一些属性，比如activeClassName属性，就是当前路由被选中后，使用这个属性中的类型 */
import { Switch, Route } from 'react-router-dom';


/* 
  组件的分类：
    站在定义的方式分类：
      - 函数式组件
      - 类式组件

    站在使用的方式分类：
      - 一般组件
      - 路由组件

    路由组件和一般组件的区别：
      - 使用方式不同：
        - 一般组件：程序员直接用标签去渲染 <Header/>
        - 路由组件：依赖路由器进行路径的匹配，让用让这个组件渲染的 <Route path="/about" component={About} />
      - 存放的文件夹位置不同
        - 一般组件：components
        - 路由组件：pages

      - 接受的props参数也是不同的
        - 一般组件：我们给组件标签传递什么属性，就可以接受什么样的props
        - 路由组件：会收到固定的几个props属性
          history:
            go: ƒ go(n)
            goBack: ƒ goBack()
            goForward: ƒ goForward()
            location: {pathname: '/about', search: '', hash: '', state: null, key: 'e97ra8'}
            push: ƒ push(path, state)
            replace: ƒ replace(path, state)
          location:
            pathname: "/about"
            search: ""
            state: null
          match:
            isExact: true
            params: {}
            path: "/about"
            url: "/about"
*/

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />

        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 自己封装的路由连接组件 */}
              {/* 当自定的组件是双标签使用的时候，内容是通过prop的children属性传递进去的 */}
              <MyLink to='/about'>About</MyLink>
              <MyLink to='home'>Home</MyLink>


              {/*  <Link className="list-group-item active" to='/about' >About</Link>
                            <Link className="list-group-item" to='/home'>Home</Link> */}
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/*  Route标签的exact属性是用来开启严格匹配的，也就是说路径的匹配必须一致，否则不再加载改组件，但是我们如果有二级路由的话，一般不开启严格匹配（而是开始模糊匹配），否则会无法使用二级路由*/}

                <Switch>
                  <Route path='/about' exact={true} component={About} />
                  <Route path='/home' exact={true} component={Home} />
                  <Route path='/home' exact={true} component={Test} />
                </Switch>
               
              </div>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
